<template>
  <div>
    <div :id="id" :style="{height:height,width:width} " />
  </div>
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons')
export default {
  props: {
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      chart: null,
      flag: false,
      sdata: []
    }
  },
  watch: {

  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id), 'macarons')
      this.chart.setOption({
        legend: {},
        tooltip: {},
        dataset: {
          dimensions: ['product', '管道参比', '管道极化', '阳极电流', '电池电量'],
          source: [
            {
              product: '设备1',
              管道参比: 43.3,
              管道极化: 85.8,
              阳极电流: 93.7,
              电池电量: 60.5
            },
            {
              product: '设备2',
              管道参比: 83.1,
              管道极化: 73.4,
              阳极电流: 55.1,
              电池电量: 54.5
            },
            {
              product: '设备3',
              管道参比: 86.4,
              管道极化: 65.2,
              阳极电流: 82.5,
              电池电量: 10.5
            },
            {
              product: '设备4',
              管道参比: 72.4,
              管道极化: 53.9,
              阳极电流: 39.1,
              电池电量: 110.5
            },
            {
              product: '设备5',
              管道参比: 72.4,
              管道极化: 53.9,
              阳极电流: 39.1,
              电池电量: 110.5
            }
          ]
        },
        xAxis: { type: 'category' },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            markLine: {
              symbol: 'none', // 去掉警戒线最后面的箭头
              label: {
                position: 'middle', // 将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                formatter: '警戒线'
              },
              data: [
                {
                  silent: false, // 鼠标悬停事件  true没有，false有
                  lineStyle: {
                    // 警戒线的样式  ，虚实  颜色
                    type: 'solid',
                    color: 'rgba(238, 99, 99)'
                  },
                  name: '警戒线',
                  yAxis: 50
                }
              ]
            },
            type: 'bar'
          },
          { type: 'bar' },
          { type: 'bar' },
          { type: 'bar' }
        ]
      })
    }
  }
}
</script>

